<template>
  <div
    class="flow-item g-flex-between-center"
    @mouseenter="isShow = true"
    @mouseleave="isShow = false"
  >
    <div class="g-flex-start-center">
      <CIcon :type="FlowTypeIconMap[props.item.flowType] || 'c-biao-cailiao'" class="g-mr6"></CIcon>
      <span class="flow-item-name">{{ props.label }}</span>
    </div>
    <span class="flow-item-value">{{ numberFormat(props.value, 2) }} {{ props.unit }}</span>
    <transition name="fade-transform">
      <div class="flow-item-popover" v-show="isShow">
        <div class="popover-name">{{ props.item.flowName }}</div>
        <div class="popover-desc g-mt2"
          >碳排量：{{ renderResultUnit(props.item.flowEmission, ' CO₂e', 2) }}
        </div>
        <div class="popover-desc"
          >类型：{{
            props.item?.flowType ? FlowTypesListMap[props.item.flowType] || '-' : '-'
          }}</div
        >
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup name="FlowItem">
import { withDefaults, defineProps, ref } from 'vue';
import type { FlowDetailItem } from '@/apis/pcf/pcfForm/model/pcfFormModel';
import { numberFormat, renderResultUnit } from '@/utils';
import { FlowTypesListMap } from '@/constants/pcf';
interface BoxTitleProps {
  label: string;
  value: any;
  unit: string;
  item: FlowDetailItem;
}
const props = withDefaults(defineProps<BoxTitleProps>(), {});

const isShow = ref(false);

const FlowTypeIconMap: Record<string, string> = {
  // ITEM: 'c-xian-lingbujian',
  ITEM: 'c-biao-cailiao',
  PART: 'c-biao-cailiao',
  PART_REPLACE: 'c-biao-cailiao',
  // MATERIAL: 'c-xian-lingbujian',
  MATERIAL: 'c-biao-cailiao',
  // ABANDON: 'c-xian-feiqichuzhi',
  ABANDON: 'c-biao-feiqichuzhi',
  // ENERGY_CONSUME: 'c-xian-nengyuanranliao',
  ENERGY_CONSUME: 'c-biao-ranliao',
  // LOGISTICS: 'c-xian-yuancailiaoyunshu',
  LOGISTICS: 'c-biao-wuliuyunshu',
  // DISCHARGE: 'c-xian-guochengpaifang'
  DISCHARGE: 'c-biao-yisanpaifang'
};
</script>

<style lang="scss" scoped>
.flow-item {
  position: relative;
  padding: 0 13px;
  height: 32px;
  background: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 4px 8px 0px rgba(64, 83, 122, 0.08);
  }
  .flow-item-name {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 20px;
  }
  .flow-item-value {
    font-size: 12px;
    font-family: HelveticaNeue;
    color: #435970;
    line-height: 20px;
  }
  .flow-item-popover {
    width: 180px;
    transition: all 0.3s;
    position: absolute;
    z-index: 1;
    top: -50%;
    left: 193px;
    padding: 8px 16px 8px 10px;
    background: #435970;
    box-shadow: 0px 4px 8px 0px rgba(64, 83, 122, 0.08);
    border: 1px solid #f2f3f5;
    border-radius: 3px;
    .popover-name {
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 18px;
    }
    .popover-desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #e1e6eb;
      line-height: 18px;
    }
  }
}
.flow-item + .flow-item {
  margin-top: 4px;
}
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}
.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10px);
}
</style>
